<template>
	<view class="loading-packbox flex justify-content-center items-center relative" style="width: 100%;height: 100%;">
		<view class="loadview"></view>
	</view>
</template>

<script>
	export default {
		name: "comLoading",
		data() {
			return {

			};
		}
	}
</script>

<style scoped>
	.loading-packbox {
		color: #fff;
		opacity: 0.78;
		font-size: 22rpx;
	}

	.loadview,
	.loadview:before,
	.loadview:after {
		width: 2em;
		height: 2em;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation: load6 1.6s infinite ease-in-out;
		animation: load6 1.6s infinite ease-in-out;
		border-radius: 100%;
	}

	.loadview {
		margin: 82px auto;
		position: relative;
		text-indent: -9999em;
		transform: translateZ(0);
		animation-delay: -0.16s;
		transform: translateY(-2em) scale(0.7);
		font-size: 22rpx;
	}

	.loadview:before,
	.loadview:after {
		content: '';
		position: absolute;
		top: 0;
	}

	.loadview:before {
		left: -3.5em;
		animation-delay: -0.32s;
	}

	.loadview:after {
		left: 3.5em;
	}

	@keyframes load6 {
		0%,
		80%,
		100% {
			box-shadow: 0 2em 0 -1.3em;
		}

		40% {
			box-shadow: 0 2em 0 0;
		}
	}
</style>
